<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM</title>
  </head>
  <body>
    <!-- JS中通过DOM面向对象的方式来对HTML文档进行操作，网页中的每一个部分都转换为了一个对象

        节点Node
             是构成我们网页的最基本的组成部分， 
             *网页中的每一个部分都可以称为是一个节点*
            

             常用节点分为四类
                – 文档节点：整个HTML文档
                – 元素节点：HTML文档中的HTML标签
                – 属性节点：元素的属性
                – 文本节点：HTML标签中的文本内容


        文档节点（document）
            • 文档节点document
            *代表的是整个HTML文档，网页中的所有节点都是它的子节点。

            • document对象作为window对象的属性存在的，我们不用获取可以直接使用。

            * 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象        


        元素节点（Element） 
            *HTML中的各种标签都是元素节点
            这也是我们最常用的一个节点。

            *浏览器会将页面中所有的标签都转换为一个元素节点，
            我们可以通过document的方法来获取元素节点。
            • 比如：
            – document.getElementById()
            – 根据id属性值获取一个元素节点对象

        文本节点（Text） 
            *文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
            • 它包括可以字面解释的纯文本内容。
            • 文本节点一般是作为元素节点的子节点存在的。
            *获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。
            • 例如：
            *元素节点.firstChild; 
            ?获取元素节点的第一个子节点，一般为文本节点    

        属性节点（Attr） 
            • 属性节点表示的是标签中的一个一个的属性，

            * 这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

            * 可以通过元素节点来获取指定的属性节点。
            • 例如：
            – 元素节点.getAttributeNode("属性名");
            ? 注意：我们一般不使用属性节点    

    -->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>
        var lis =document.getElementsByTagName("li");
        console.log(lis);


    </script>
  </body>
</html>
